<template>
  <div class="policy-box">
    <div class="search-box">
      <div class="search-right1">
        <form action="/">
          <van-search
            v-model="employeeTitle"
            show-action
            shape="round"
            placeholder="请输入内容搜索"
            clearable
            @search="onSearch"
            @clear="onCancel"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </form>
      </div>
    </div>
    <div class="main-content">
      <div class="list-box">
        <div v-if="isSearch">
          <div v-for="(value, index) in searchData" :key="index" class="item-box" @click="toDetailPage(value.id)">
            <div class="item-left">
              <div class="title-box">
                {{ value.title }}
              </div>
              <div class="time-box">
                {{ value.updateTime }}
              </div>
            </div>
            <div class="item-right">
              <img src="../../../assets/institution.png" alt="" srcset="">
            </div>
          </div>
        </div>
        <div v-if="isSearch && searchData.length == 0" style="text-align: center;">暂无该内容</div>
        <van-list
          v-if="!isSearch"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(value, index) in listData" :key="index" class="item-box" @click="toDetailPage(value.id)">
            <div class="item-left">
              <div class="title-box">
                {{ value.title }}
              </div>
              <div class="time-box">
                {{ value.updateTime }}
              </div>
            </div>
            <div class="item-right">
              <img src="../../../../assets/institution.png" alt="" srcset="">
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { employeeList } from '@/api/activeItem.js'
export default {
  name: 'policy',
  data () {
    return {
      isSearch: false,
      loading: false,
      listData: [],
      searchData: [],
      employeeTitle: '',
      finished: false,
      page: 1,
      size: 10,
      isChange: false
    }
  },
  mounted () {
    this.getEmployeeList()
  },
  methods: {
    onLoad () {
      console.log('触底了~', 'this.loading===,', this.loading)
      this.page = this.page + 1
      if (this.page === 2) {
        this.isChange = true
      } else {
        this.isChange = false
      }
      this.getEmployeeList()
    },
    // 获取事业单位的列表
    getEmployeeList () {
      employeeList({
        page: this.page,
        size: this.size,
        type: 2,
        title: this.employeeTitle
      }).then(res => {
        if (res.data.code === 0) {
          if (this.isSearch) {
            this.searchData = res.data.data.list.length > 0 ? res.data.data.list : []
            this.searchData.forEach(value => {
              if (value.title.length > 40) {
                value.title = value.title.substring(0, 40) + '...'
              }
            })
          } else {
            // 将新数据与老数据进行合并
            if (this.page > 1) {
              if (this.page == 2 && this.isChange) {
                console.log('内部page大于2清空再赋值:', this.page)
                this.listData = []
                this.listData = res.data.data.list
              } else {
                this.listData = this.listData.concat(res.data.data.list) // 合并
              }
            } else {
              console.log('内部page小于1')
              console.log('isChange:=====', this.isChange)
              this.listData = []
              this.listData = res.data.data.list
            }
            this.listData.forEach(value => {
              if (value.title.length > 40) {
                value.title = value.title.substring(0, 40) + '...'
              }
            })
            if (this.listData.length >= res.data.data.total) {
              this.finished = true
            }
          }
        }
      })
    },
    toDetailPage (id) {
      console.log('前往详情页面')
      this.$router.push({
        path: '/institutionRecruit/detail',
        query:{
          id: id
        }
      })
    },
    onSearch () {
      console.log('搜索内容')
      this.isSearch = true
      this.getEmployeeList()
    },
    onCancel () {
      console.log('点击了清除按钮')
      this.employeeTitle = ''
      this.isSearch = false
      console.log(this.isSearch)
      // this.getEmployeeList()
    }
  }
}
</script>
<style lang="less" scoped>
.policy-box{
  min-height: 100vh;
  background-color: #f4f4f4;
  .search-box{
    height: 1.44rem;
    display: flex;
    .search-left1{
      flex: 8%;
      position: relative;
      text-align: center;
      background-color: #fff;
      .arrow-left-search{
        position: absolute;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
      }
    }
    .search-right1{
      flex: 92%;
      line-height: 1.49333rem;
      & /deep/ .van-search__action{
        color: #17b987;
      }
    }
  }
  .main-content{
    margin: 12px;
    .list-box{
      .item-box{
        display: flex;
        min-height: 90px;
        border-radius: 6px;
        padding: 12px 12px 8px 12px;
        margin-bottom: 12px;
        background-color: #fff;
        &:active{
          background-color: #f8f8f8;
        }
        .item-left{
          flex: 70%;
          position: relative;
          .time-box{
            position: absolute;
            bottom: 0;
            color: #aeaeae;
          }
          .title-box{
            font-size: 16px;
          }
        }
        .item-right{
          flex: 28%;
          // background-color: blue;
          border-radius: 6px;
          margin-left: 1%;
          img{
            width: 100%;
            // height: 100%;
            max-height: 90px;
            border-radius: 6px;
          }
        }
      }
    }
    .empty-box{
      height: 40px;
      text-align: center;
      color: #aeaeae;
    }
  }
}

</style>
